<template>
  <div>
    <a-card :bordered='false'>
      <f-search-form :more='true' @searchHandler='searchHandler' @exportHandler='exportHandler' :show-export-btn='true'>
        <f-search-form-item label='药品名称' name='drugsName' />
        <f-search-form-item label='商品类型' name='drugType' :showAll='false' type='select' :data='api.busCommon.drugType'></f-search-form-item>
      </f-search-form>
      <f-table ref='table' rowKey='drugsId' :columns='columns' :multiple='false' :operator='operator' :params='queryParam' :api='api.drugs' handler='hyDrugsPageListHandler'>
         <span slot='drugType' slot-scope='text, record, index'>
            <a-tag color='#108ee9' v-if="text=='ZY'">自营</a-tag>
            <a-tag color='#f50' v-if="text=='ZS'">招商</a-tag>
        </span>
        <span slot='drugsState' slot-scope='text, record, index'>
            <a-tag color='#108ee9' v-if='text==0'>已禁用</a-tag>
            <a-tag color='#f50' v-if='text==1'>已启用</a-tag>
        </span>
        <span slot='policyDrugId' slot-scope='text, record, index'>
            <a-tag color='#108ee9' v-if='text'>已设置</a-tag>
            <a-tag color='#f50' v-if='!text'>未设置</a-tag>
        </span>
      </f-table>
    </a-card>
    <upload-modal ref='uploadModal' :action='api.drugs.importData' @change='uploadEnd()'></upload-modal>
  </div>
</template>
<script>
import drugsDrawer from "./drugs_drawer.vue"
import api from "./js/api"
import UploadModal from "./upload_modal"
export default {
  name: "TableList",
  components: {
    drugsDrawer,
    UploadModal
  },
  data() {
    let me = this
    //操作按钮
    let operator = []
    operator.push({
      name: "同步海鹰商品",
      icon: "sync",
      that: this,
      handler: (table, that) => {
        this.http.confirm(this, {
          content: "确认同步海鹰商品吗?",
          url: api.drugs.syncHyDrug,
          success: (me, data) => {
            this.$refs.table.refresh()
          }
        })
      }
    })
    operator.push({
      name: "导入零售价",
      icon: "import",
      that: this,
      handler: (table, that) => {
        this.$refs.uploadModal.open()
      }
    })
    operator.push({
      name: "删除",
      icon: "delete",
      batch: true,
      handler: function(table) {
        table.remove()
      }
    })
    return {
      api: Object.assign(api, this.api),
      //列表初始化查询参数
      queryParam: {
        fileName:"商品列表"
      },
      // 表头
      columns: [
        {
          title: "序号",
          width: "60px",
          align: "center",
          customRender: (text, record, index) => index + 1
        },
        {
          title: "供应商",
          align: "left",
          width: "200px",
          isColumnHidden:true,
          ellipsis: true,
          dataIndex: "producersName"
        },
        {
          title: "商品名称",
          align: "left",
          width: "280px",
          ellipsis: true,
          dataIndex: "drugsName"
        },
        {
          title: "规格",
          align: "left",
          width: "250px",
          ellipsis: true,
          dataIndex: "drugsSpec"
        },
        {
          title: "单位",
          align: "left",
          width: "100px",
          dataIndex: "drugsUnit"
        },
        {
          title: "自营",
          align: "center",
          dataIndex: "drugType",
          scopedSlots: { customRender: "drugType" }
        },
        {
          title: "零售价",
          align: "left",
          width: "100px",
          sorter:true,
          dataIndex: "retailPrice"
        },
        {
          title: "结算政策",
          align: "center",
          dataIndex: "policyDrugId",
          isColumnHidden:true,
          scopedSlots: { customRender: "policyDrugId" }
        },
        {
          title: "状态",
          align: "center",
          isColumnHidden:true,
          dataIndex: "drugsState",
          scopedSlots: { customRender: "drugsState" }
        }
      ],
      operator: operator
    }
  },
  created() {
  },
  methods: {
    uploadEnd() {
      this.$refs.uploadModal.close()
      this.$message.success("导入成功")
      this.$refs.table.refresh(false, this.queryParam)
    }
  }
}
</script>
